Skip to content

feat(react-cap-theme): introduce style hook to specifically opt into border radius updates#662

Merged
dvdzkwsk merged 5 commits into
mainfrom
david/cap-border-styles
Jun 24, 2026
Merged

feat(react-cap-theme): introduce style hook to specifically opt into border radius updates#662
dvdzkwsk merged 5 commits into
mainfrom
david/cap-border-styles

Conversation

@dvdzkwsk

@dvdzkwsk dvdzkwsk commented Jun 24, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Adds a new export to @fluentui-contrib/react-cap-theme for consumers that want CAP's rounded corners but otherwise stock Fluent v9 styling (no color, spacing, or typography changes). This is currently entirely a completely isolated set of styles, but if this ends up being promising we'd remove these border styles from the core CAP_STYLE_HOOKS styles.

import { FluentProvider, webLightTheme } from '@fluentui/react-components';
import {
  mergeStyleHooks,
  CAP_STYLE_HOOKS_ROUNDED_CORNERS,
} from '@fluentui-contrib/react-cap-theme';

const styleHooks = mergeStyleHooks([
  CAP_STYLE_HOOKS_ROUNDED_CORNERS,
  // ...other CAP facets, or your own custom style hooks
]);

export const App = () => (
  <FluentProvider theme={webLightTheme} customStyleHooks_unstable={styleHooks}>
    {/* the rest of your app */}
  </FluentProvider>
);

@dvdzkwsk dvdzkwsk requested a review from a team as a code owner June 24, 2026 00:34
pixel-perfectionist
pixel-perfectionist approved these changes Jun 24, 2026
View reviewed changes
Comment thread change/@fluentui-contrib-react-cap-theme-9ae06b97-135d-45f6-b610-30ca8ac5e4dc.json
@sxsx1xsxs

sxsx1xsxs commented Jun 24, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

I am a little worried that it's all separated, the radius styles are not filtered from components styles but in a completely separated file. Alternative is we pass in through the argument of facets all the way into the object used in makeStyles in each component styles files to filter based on facets.

@dvdzkwsk

dvdzkwsk commented Jun 24, 2026

Copy link
Copy Markdown
Contributor Author

I am a little worried that it's all separated, the radius styles are not filtered from components styles but in a completely separated file. Alternative is we pass in through the argument of facets all the way into the object used in makeStyles in each component styles files to filter based on facets.

I agree with you about the future ideal state. For now, I intentionally want to avoid refactoring the existing code to remove the duplication until we know this is a pattern we want to continue. It's more of a standalone experiment for right now.

@dvdzkwsk dvdzkwsk merged commit a31a5b6 into main Jun 24, 2026
9 checks passed
@dvdzkwsk dvdzkwsk deleted the david/cap-border-styles branch June 24, 2026 19:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@pixel-perfectionist pixel-perfectionist pixel-perfectionist approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@dvdzkwsk @sxsx1xsxs @pixel-perfectionist